// 路由组件
import React, { Component } from 'react'
import { Switch, Route, Redirect } from "react-router-dom";
// 懒加载的步骤1，先使用React.lazy()
const Index = React.lazy(() => import('../components/Index.jsx'))
const Transition1 = React.lazy(() => import('../components/Transition1.jsx'))
const Transition2 = React.lazy(() => import('../components/Transition2.jsx'))
const Transition3 = React.lazy(() => import('../components/Transition3.jsx'))
const NotFound = React.lazy(() => import('../components/NotFound.jsx'))
const PathParams = React.lazy(() => import('../components/PathParams.jsx'))
const List = React.lazy(() => import('../components/List.jsx'))
const Detail = React.lazy(() => import('../components/Detail.jsx'))
const Father = React.lazy(() => import('../components/Father.jsx'))
const Antd = React.lazy(() => import('../components/Antd.jsx'))
const Http = React.lazy(() => import('../components/Http.jsx'))
const Redux = React.lazy(() => import('../components/Redux.jsx'))

// import Transition1 from '../components/Transition1.jsx'
// import Transition2 from '../components/Transition2.jsx'
// import Transition3 from '../components/Transition3.jsx'
// import NotFound from '../components/NotFound.jsx'
// import PathParams from '../components/PathParams.jsx'
// import List from '../components/List.jsx'
// import Detail from '../components/Detail.jsx'

export default class Router extends Component {
  render() {
    return (
      <>
        {/* // 懒加载的步骤2，使用React.Suspense,以及fallback */}
        <React.Suspense fallback={<mark>Loading ...</mark>}>
          <Switch>
            {/* 以第一次匹配到的为准 */}
            {/* exact:严格匹配，每个字符都匹配成功。通常用在地址为‘/’的组件上 */}
            {/* strict:严格匹配，判断结尾的斜线有没有加上。一般不加，加了过于严格，比较麻烦 */}
            {/* 下面的这些route就像vue router中的routes那个路由表 */}
            {/* 被Route组件包裹的组件叫路由组件，会有路由相关的属性和方法 */}
            {/* 没有被Route包裹的就是非路由组件，没有路由相关的属性和方法，通过withRouter添加 */}
            <Route path="/" exact component={Index}></Route>
            <Route path="/transition1" exact strict component={Transition1}></Route>
            <Route path="/transition2" exact component={Transition2}></Route>
            <Route path="/transition3" exact component={Transition3}></Route>
            <Route path="/pathparams" exact component={PathParams}></Route>
            <Route path="/list" component={List}></Route>
            <Route path="/detail/:name" component={Detail}></Route>
            <Route path="/father" component={Father}></Route>
            <Route path="/antd" component={Antd}></Route>
            <Route path="/http" component={Http}></Route>
            <Route path="/redux" component={Redux}></Route>
            {/* 如果省略path，就表示匹配所有地址。404处理方式1 */}
            <Route component={NotFound}></Route>
            {/* 404处理方式2 */}
            {/* <Route path="/404" component={NotFound}></Route>
          <Redirect to='/404'></Redirect> */}
          </Switch>
        </React.Suspense>
      </>
    )
  }
}
